<template>
  <div class="login">
    <div class="login-box">
      <p class="title">欢迎登陆</p>
      <Tabs :value="name1" @on-click="getName" :style="name1 === 'name1' ? 'height: 200px;' : 'height: 450px;'">
          <TabPane label="登录" name="name1" >
          <Form ref="formInline" :model="formInline" :rules="ruleInline" >
            <FormItem prop="account">
              <Input
                type="text"
                v-model="formInline.account"
                class="ipt"
                placeholder="请输入账号"
              >
                <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="pwd">
              <Input
                type="password"
                  class="ipt"
                v-model="formInline.pwd"
                placeholder="请输入密码"
              >
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Button type="primary" class="btn" @click="login"
                >登录</Button
              >

            </FormItem>
          </Form>
          </TabPane>
          <TabPane label="注册" name="name2" >
            <Form ref="registInline" :model="registForm" :rules="ruleRegist" :label-width="60">
              <FormItem prop="is_student" label="身份">
              <RadioGroup v-model="registForm.is_student" >
                  <Radio :label="1">学生
                  </Radio>
                  <Radio :label="0">老师
                  </Radio>
              </RadioGroup>
              </FormItem>
              <FormItem prop="account" label="账号">
                <Input
                  type="text"
                  v-model="registForm.account"
                  class="ipt"
                  placeholder="请输入账号"
                >
                </Input>
              </FormItem>
              <FormItem prop="number" label="学号" v-if="registForm.is_student === 1">
                <Input
                  type="text"
                  v-model="registForm.number"
                  class="ipt"
                  placeholder="请输入学号"
                >
                </Input>
              </FormItem>
              <FormItem prop="work_number" label="工号" v-if="registForm.is_student === 0">
                <Input
                  type="text"
                  v-model="registForm.work_number"
                  class="ipt"
                  placeholder="请输入工号"
                >
                </Input>
              </FormItem>
              <FormItem prop="mail" label="邮箱" >
                <Input
                  type="text"
                  v-model="registForm.mail"
                  class="ipt"
                  placeholder="请输入邮箱"
                >
                </Input>
              </FormItem>
              <FormItem prop="nickname" label="昵称" >
                <Input
                  type="text"
                  v-model="registForm.nickname"
                  class="ipt"
                  placeholder="请输入昵称"
                >
                </Input>
              </FormItem>
              <FormItem prop="pwd" label="密码">
                <Input
                  type="password"
                  class="ipt"
                  v-model="registForm.pwd"
                  placeholder="请输入密码"
                >
                </Input>
              </FormItem>

            </Form>
              <Button type="primary" class="btn" style="margin-top:15px"
              @click="regist"
                >注册</Button
              >
          </TabPane>
      </Tabs>

    </div>
    <!-- <div class="login-con">
      <Card :bordered="false">
        <p slot="title">
          <Icon type="log-in"></Icon>
          欢迎登录
        </p>
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules">
            <FormItem prop="email">
              <i-input v-model="form.email" placeholder="请输入用户名">
                <span slot="prepend">
                  <Icon :size="16" type="person"></Icon>
                </span>
              </i-input>
            </FormItem>
            <FormItem prop="password">
              <i-input
                type="password"
                v-model="form.password"
                placeholder="请输入密码"
              >
                <span slot="prepend">
                  <Icon :size="14" type="locked"></Icon>
                </span>
              </i-input>
            </FormItem>
            <FormItem>
              <Button
                :loading="buttonLoading"
                type="primary"
                long
                >登录</Button
              >
            </FormItem>
          </Form>
        </div>
      </Card>
    </div> -->
    <!-- <p class="box">校园博客管理系统</p> -->
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex'
  import   user  from '../api/login'
export default {
  data() {
      let emailRule = (rule, value, callback) => {
        if (!!value) {
          let reg =
            /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
          if (!reg.test(value)) {
            callback(new Error('请输入正确得邮箱号'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }
    return {
      buttonLoading: false,
      // 表单内容，email && 密码
      formInline: {
        account: "",
        pwd: "",
      },
      // 表单验证，email && 密码
      ruleInline: {
        user: [
          {
            required: true,
            message: "Please fill in the user name",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "Please fill in the password.",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "密码至少六位数",
            trigger: "blur",
          },
        ],
      },
      ruleRegist: {
        number: [
          {
            required: true,
            message: "请输入学号",
            trigger: "blur",
          },
        ],
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        work_number: [
          {
            required: true,
            message: "请输入工号",
            trigger: "blur",
          },
        ],
        nickname: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur",
          },
        ],
        mail: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            type: "string",
            trigger: "blur",
            validator: emailRule
          },
        ],
      },
      registForm: {
        number: '',
        pwd: '',
        is_student: 1,
        mail: '',
        work_number: '',
        account: ''
      },
      name1: 'name1'
    };
  },
  created() {},
  methods: {
      ...mapActions({
        regist: 'user/regist',
      }),
    getName(v) { 
      this.name1 = v
    },
    regist() { 
      this.$refs.registInline.validate(async val => { 
        if(!val) return false
        const { data : res } = await  user.regist({
          ...this.registForm
        })
        if(res.code !== 200) return this.$Message.error('系统繁忙')
        this.$Message.success('注册成功')
        localStorage.token = parseInt(Math.random()*(100000000000000000000-1+1)+1)
        localStorage.nickname = res.data.nickname
        localStorage.is_student = res.data.is_student
        localStorage.mail = res.data.mail
        localStorage.work_number = res.data.work_number
        localStorage.id = res.data.id
        localStorage.account = res.data.account
        setTimeout(() => { 
          this.$router.push('/article-list')
        },500)
      })
    },
    login() { 
      this.$refs.formInline.validate(async val => { 
        if(!val) return false
        const { data : res } = await  user.userLogin({
          ...this.formInline
        })
        if(res.result.status !== 1) return this.$Message.error('该账号已被管理员拉黑，请联系客服！')
        if(res.code !== 200) return this.$Message.error('系统繁忙')
        this.$Message.success('登录成功')
        localStorage.token = parseInt(Math.random()*(100000000000000000000-1+1)+1)
        localStorage.nickname = res.result.nickname
        localStorage.is_student = res.result.is_student
        localStorage.mail = res.result.mail
        localStorage.work_number = res.result.work_number
        localStorage.id = res.result.id
        localStorage.userid = res.result.id
        localStorage.account = res.result.account
        localStorage.number = res.result.number
        localStorage.pwd = res.result.pwd
        localStorage.status = res.result.status
        localStorage.img = res.result.img
        setTimeout(() => { 
          this.$router.push('/article-list')
        },500)
      })
    },
  },
};
</script>

<style scoped>
html,
body {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  overflow: hidden;
}

.login {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/login1_bg.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}

.login-con {
  position: absolute;
  right: 160px;
  top: 50%;
  transform: translateY(-60%);
  width: 300px;
}

.login-header {
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  padding: 30px 0;
}

.form-con {
  padding: 10px 0 0;
}

.login-tip {
  font-size: 10px;
  text-align: center;
  color: #c3c3c3;
}
.box {
  position: absolute;
  top: 16%;
  left: 79%;
  transform: translateX(-45%);
  font-size: 26px;
  font-weight: 600;
}
.login-box {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
  width: 600px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
}
.btn{
  width: 100%;
}
.title{
  display: flex;
  justify-content: center;
  font-size: 25px;
  font-weight: 600;
  padding-bottom: 30px;
}
.box{
  position: absolute;
  top: 0;
  right: 30px;
}
</style>
